<template>
    <div class="bottomNav">
        <div class="bottomNavTop">
            <div class="bottomImgBox">
                <img src="../assets/productImg/shangyun_logo.png" alt="">
                <span>shangyuninfo.com</span>
                <span>|</span>
            </div>
            <div class="bottomNavTop1">
                <p><a href="#" class="bottomNavTop1Title">快速导航</a></p>
                <!--                <p><a href="#">&nbsp;</a></p>-->
                <p v-for="(item,index) in listNav" :key="index"><a  style="cursor: pointer" @click="goToOthers(index)">{{item}}</a></p>
            </div>
            <div class="bottomNavTop2">
                <h4>官方微信公众号</h4>
                <div>
                    <img :src="'http://www.shangyuninfo.com/api/profile/qrCodeImg/'+erweima" alt="">
                </div>
            </div>
            <div class="bottomNavTop2">
                <h4>联系我们</h4>
                <p v-for="(item,index) in footConnectUs" :key="index"><span>{{item.dictLabel}}: </span><span>{{item.dictValue}}</span></p>
            </div>
        </div>
        <div class="bottomNavBottom">
            <p>版权所有河北尚云信息科技有限公司2012-2020保留一切权力</p>
        </div>
    </div>
</template>

<script>
    import {connectUs, qrCode} from "../api";

    export default {
        name: "footerBox",
        data(){
            return{
                listNav:['首页','产品','星火实验室','新闻中心','关于我们'],
                listPage:['/index','/productPage','/laboratory','/news','/aboutUs'],
                erweima:'2021/09/10/a9659a8d-68fd-4ee2-904c-1e4cd28b2e41.jpg',
                footConnectUs:[],
            }
        },
        methods:{
            goToOthers(index){
                this.$router.push(this.listPage[index])
            }
        },
        created() {
            qrCode().then(res=>{
                // console.log(res.data.dictValue)
                this.erweima=res.data.dictValue
            })
            connectUs().then(res=>{
                // console.log(res.data)
                this.footConnectUs=res.data
            })
        }
    }
</script>

<style scoped lang="less">
    .bottomNav {
        width: 100%;
        height: 250px;
        background-color: rgb(24, 24, 25);
    }
    .bottomNavTop {
        margin: auto;
        padding: 20px 15px 0 15px;
        width: 1170px;
        height: 189.2px;
        /*background-color: #ffffff;*/
    }
    .bottomImgBox {
        margin-top: 40px;
        width: 300px;
        height: 47.4px;
        float: left;
        position: relative;
        img {
            width: 120px;
            height: 47.4px;
            vertical-align: middle;
        }
        span {
            color:rgb(89, 88, 90);
        }
    }

    .bottomImgBox>span:nth-of-type(1) {
        margin-left: 20px;
        display: inline-block;
        height: 47.4px;
        line-height: 47.4px;
    }
    .bottomImgBox>span:nth-of-type(2) {
        position: absolute;
        left: 129px;
        top: 14px;
    }
    .bottomNavTop1{
        padding: 0 15px;
        margin-left: 10px;
        height: 189.2px;
        width: 220px;
        float: left;
    }
    .bottomNavTop1>p:nth-of-type(1) {
        margin-bottom: 10px;
    }
    .bottomNavTop1 a {
        text-decoration: none;
        color: #888889;
        line-height: 29px;
        font-size: 14px;
    }
    .bottomNavTop1Title {
        color: #337ab7 !important;
    }
    .bottomNavTop1>p:hover>a {
        color: #337ab7;
    }
    .bottomNavTop2{
        padding: 0 15px;
        height: 189.2px;
        width: 270px;
        float: left;
    }
    .bottomNavTop2>div {
        width: 270px;
        height: 150px;
        margin-top: 18px;
    }
    .bottomNavTop2 img {
        display: block;
        width: 150px;
        height: 150px;
    }
    .bottomNavTop2>h4 {
        color: #fff;
        font-size: 14px;
    }
    .bottomNavTop2>p:nth-of-type(1) {
        margin-top: 10px;
    }
    .bottomNavTop2>p {
        padding: 10px 0;
        font-size: 14px;
    }
    .bottomNavTop2>p>span {
        /*color: #1f8efe;*/
        color: #888889;
    }
    .bottomNavTop2>p>span:nth-of-type(1) {
        color: #1f8efe;
        /*color: #888889;*/
    }
    .bottomNavBottom {
        width: 100%;
        min-width: 1200px;
        height: 40px;
        background-color: black;
    }
    .bottomNavBottom>p {
        font-size: 12px;
        text-align: center;
        color: #888889;
        line-height: 40px;
    }
</style>